<template>
  <div class="newinfo">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="img">
      <van-image
        round
        width="8rem"
        height="8rem"
        src="http://img.wxcha.com/m00/f0/f5/5e3999ad5a8d62188ac5ba8ca32e058f.jpg"
      />
    </div>
    <div class="body">
      <div class="main1">
        <span>用户名</span>
        <i>玛丽亚</i>
      </div>
      <div class="main1">
        <span>邮箱</span>
        <i>1962235394@qq.com</i>
      </div>
      <div class="main1">
        <span>手机号</span>
        <i>17698203989</i>
      </div>
      <div class="main1">
        <span>生日</span>
        <i>
          <van-cell @click="showPopup">
            <van-field
              v-model="timeValue"
              placeholder="选择的日期结果"
              readonly
            />
          </van-cell>
          <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '30%' }"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              confirm-button-text="确定"
              @confirm="confirmFn()"
              @cancel="cancle()"
          /></van-popup>
        </i>
      </div>
      <div class="main1">
        <span>所在城市</span>
        <i>城市输入 </i>
      </div>
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";

export default {
  data() {
    return {
      timeValue: "",
      show: false,
      currentDate: new Date(2021, 0, 17),
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2022, 10, 1),
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    showPopup() {
      this.show = true;
    },
    confirmFn() {
      this.timeValue = this.formatDate(this.currentDate);
      this.show = false;
    },
    cancle() {
      this.show = false;
    },
  },
};
</script>

<style scoped>
.img {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main1 {
  font-size: 0.9rem;
  height: 1.2rem;
  border-bottom: 1px solid #ccc;
  width: 90%;
  margin: 0 auto;
  padding: 1.7rem 0;
  color: #ccc;
  line-height: 1.2rem;
}
.main1 span {
  float: left;
  color: #000;
}
.main1 i {
  float: right;
  color: #ccc;
  font-style: normal;
}
.van-cell__value {
  color: #ccc;
}
.van-cell {
  padding: 0;
}
.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #ccc;
  line-height: inherit;
  text-align: right;
  background-color: transparent;
  border: 0;
  resize: none;
}
</style>
